<template>
  <div class="containerLogin">
    <div class="containerLogin__login">
      <div class="containerLogin__login__header">
        <div class="containerLogin__login__header__left iconfont"></div>
        <div class="containerLogin__login__header__mid">LOGIN</div>
        <div class="containerLogin__login__header__right"></div>
      </div>
      <div class="containerLogin__login__content">
        <input
          type="text"
          placeholder="请输入手机号"
          class="containerLogin__login__content__zh"
          v-model.trim="user.phone"
        />
        <input
          type="password"
          placeholder="请输入密码"
          class="containerLogin__login__content__psd"
          v-model.trim="user.password"
        />
        <div class="containerLogin__login__content__moreFun">
          <div
            class="containerLogin__login__content__moreFun__left"
            @click="toReset"
          >
            忘记密码
          </div>
          <div
            class="containerLogin__login__content__moreFun__right"
            @click="toRegister"
          >
            立即注册
          </div>
        </div>
        <button class="containerLogin__login__content__btn" @click="toLogin">
          点击登录
        </button>
      </div>
    </div>
    <div class="containerLogin__bottom">
      <input
        type="checkbox"
        class="containerLogin__bottom__checkbox"
        v-model="checkValue"
      />
      <span class="containerLogin__bottom__rules"
        >我已阅读并同意<u>隐私政策</u>与<u>用户协议</u></span
      >
    </div>
  </div>
  <transition
    enter-active-class="animate__animated animate__bounceInLeft"
    leave-active-class="animate__animated animate__bounceOutRight"
  >
    <Toast v-if="isShow" :message="toastMessage" />
  </transition>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import Toast, { showToastEffect } from "../components/Toast.vue";
import { useBackRouterEffect } from "../components/effects/backEffect";
import api from "../api/index";
import { useStore } from "vuex";

const { showToast, isShow, toastMessage } = showToastEffect();
let checkValue = ref(false);
const store = useStore();
const reg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
const user = reactive({
  phone: 13812341234,
  password: "123",
});

const router = useRouter();
function toLogin() {
  if (!reg.test(user.phone)) {
    showToast("请输入正确的手机号");
    return;
  }
  if (checkValue.value) {
    api.login(user).then((res) => {
      store.commit("saveUserInfo", res);
      router.push("/main");
    });
  } else {
    showToast("请先同意相关隐私政策");
    return;
  }
}
function toRegister() {
  router.push("/register");
}
function toReset() {
  router.push("/reset");
}
</script>
<style lang="scss">
.containerLogin {
  width: 414rem;
  height: 896rem;
  background: url("../image/rain.svg");
  position: relative;
  overflow: hidden;
  &__login {
    width: 100%;
    height: 100%;
    background-color: #c6c6c68c;
    padding-top: 44rem;
    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20rem;
      font-size: 20rem;
      &__mid {
        font-weight: bold;
        font-size: 25rem;
        letter-spacing: 3rem;
      }
    }
    &__content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 150rem;
      &__moreFun {
        width: 350rem;
        display: flex;
        justify-content: space-between;
        margin: -40rem 0 50rem 0;
        font-size: 14rem;
      }
      & input {
        width: 350rem;
        height: 40rem;
        background-color: #ffffff00;
        border: 0;
        border-bottom: 2rem solid #26202076;
        margin-bottom: 50rem;
        font-size: 25rem;
        padding-left: 20rem;
      }
      & > input::placeholder {
        font-size: 22rem;
        color: rgba(28, 49, 23, 0.635);
        font-weight: bold;
      }
      &__btn {
        width: 300rem;
        height: 40rem;
        background-color: #10a096;
        box-shadow: 0 3rem 6rem #06867d;
        border-radius: 10rem;
        font-size: 19rem;
        color: aliceblue;
        font-weight: bold;
        letter-spacing: 10rem;
        margin-top: 50rem;
      }
    }
  }
  &__bottom {
    width: 272rem;
    position: fixed;
    bottom: 150rem;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    &__checkbox {
      width: 17rem;
      height: 17rem;
    }
    &__rules {
      font-size: 14rem;
      margin-left: 5rem;
      & u {
        color: red;
        margin: 0 5rem;
      }
    }
  }
}
</style>
